<template>
  <div>
    <div class="attribute-wrapper">
      <div v-if="title" class="title">{{ title }}</div>
      <div class="attribute">
        <div class="attribute-item">
          <div class="label">参数名称</div>
          <div class="value">参数值</div>
        </div>
        <div>
          <div
            v-for="(attr,index) in attrs"
            :key="index"
            class="attribute-item"
          >
            <div class="label">
              <el-input v-model="attr.name" placeholder="参数名称" :size="size" :disabled="disabled" />
            </div>
            <div class="value">
              <el-input v-model="attr.value" placeholder="参数值" :size="size" :disabled="disabled" />
            </div>
            <div class="button">
              <el-button v-if="!num &&!disabled" :size="size" :icon="Delete" @click="deleteAttribute(index)">删除</el-button>
              <el-button :disabled="index === 0" :size="size" :icon="Top" @click="moveUpAttribute(index)">上移</el-button>
              <el-button :disabled="index === attrs.length - 1" :size="size" :icon="Bottom" @click="moveDownAttribute(index)">下移</el-button>
            </div>
          </div>
        </div>
        <div v-if="!num && !disabled" v-show="!limit || limit && attrs.length < limit" class="attribute-add-btn" @click="insertAttribute">
          <el-button :size="size" :icon="Plus">新增参数</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Plus,Delete,Top,Bottom} from "@element-plus/icons-vue"
import modal from "@/plugins/modal.js"
const props = defineProps({
  title: {
    type: String,
    default: '参数设置'
  },
  attributes: {
    type: [Array, String],
    default() {
      return []
    }
  },
  height: {
    type: String,
    default: '500px'
  },
  size: {
    type: String,
    default: 'large',
    validator(value, props) {
      return new Set(['small', 'default', 'large']).has(value)
    }
  },
  limit: {
    type: Number,
    default: 0
  },
  num: {
    type: Number,
    default: 0
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const attrs = ref([])
watch(() => props.attributes, (newVal) => {
  if (newVal && typeof newVal === 'string') {
    attrs.value = JSON.parse(newVal)
  } else if (Array.isArray(newVal)) {
    attrs.value = newVal
  } else {
    attrs.value = []
  }
  if (props.num && attrs.value.length < props.num) {
    for (let i = 0; i === attrs.value.length - props.num; i++) {
      attrs.value.push({ name: '', value: '' })
    }
  }
  if (props.limit && attrs.value.length > props.limit){
    attrs.value = attrs.value.slice(0, props.limit)
    modal.msgError('属性个数最多' + props.limit + '个')
  }
},{immediate:true})
const insertAttribute = () => {
  attrs.value.push({ name: '', value: '' })
}
const deleteAttribute = (index) => {
  attrs.value.splice(index, 1)
}
const moveUpAttribute = (index) => {
  if (index === 0) return
  attrs.value.splice(index - 1, 2, attrs.value[index], attrs.value[index - 1])
}
const moveDownAttribute = (index) => {
  if (index === attrs.value.length - 1) return
  attrs.value.splice(index, 2, attrs.value[index+1], attrs.value[index])
}
const getAttrs = (toString) => {
  return toString ? JSON.stringify(attrs.value) : attrs.value
}
</script>

<style lang="scss" scoped>
.attribute-wrapper {
  height: v-bind(height);
  overflow: auto;
}
.attribute {
  padding: 0 40px 20px;
  &-item {
    display: flex;
    align-items: center;
    padding: 20px 20px;
    color: #808080;
    border-bottom: 1px solid #e1e1e1;
    .label {
      width: 240px;
    }
    .value {
      margin-left: 20px;
      width:240px;
    }
    .button {
      width:360px;
      margin-left: 20px;
    }
  }
}
.attribute-add-btn {
  margin-top: 20px;
  display: flex;
}
</style>
